<template>
  <vue-content>
    <vue-header>
      <vue-header-form>
        <el-form :inline="true" :model="formFilter" ref="formFilter">
          <el-form-item label="类别名称" prop="categoryName">
            <el-input v-model.trim="formFilter.categoryName" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="SearchSubmit('formFilter')">查询</el-button>
            <el-button @click="resetForm('formFilter')">重置</el-button>
          </el-form-item>
        </el-form>
      </vue-header-form>
      <vue-header-button>
        <el-button type="info" @click="create">新增</el-button>
      </vue-header-button>
    </vue-header>
    <vue-body>
      <div class="content">
        <!-- <div class="left_content">
          <el-tree :data="tree" 
            node-key="id"
            style="width:150px"
            :props="treeConfig"
            @node-click="handleNodeClick"
            ref="tree">
          </el-tree>
        </div> -->
        <div class="right_content_table">
          <el-table
            v-loading.body="loading"
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  v-loading.body="loading"
                  inline
                  :data="props.row.categoryList"
                  :show-header='showHeader'
                  row-class-name="rowColor"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="categoryName"
                    label="分类名称">
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="分类状态">
                    <template slot-scope="scope">
                      {{scope.row.status | status}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="分类图片" width="140">
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                        <img class="logoImgPic" :src="imgSrc(scope.row.picUrl)"/>
                        <div slot="reference" class="name-wrapper">
                          <el-button icon="el-icon-picture">图片</el-button>
                        </div>
                      </el-popover>
                    </template>
                    <!-- <template scope="scope">
                        <img class="logoImgPic" :src="imgSrc(scope.row.picUrl)"/>
                    </template> -->
                  </el-table-column>
                  <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                      <el-button-group>
                        <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row, tableData,'delete')">删除</el-button>
                          <el-button
                            size="mini"
                            v-if="scope.row.status != '00'"
                            @click="abled(scope.row.id,'enabled')">启用</el-button>
                          <el-button
                            size="mini"
                            type="danger"
                            v-if="scope.row.status == '00'"
                            @click="enabled(scope.row.id,'disabled')">禁用</el-button>
                      </el-button-group>
                    </template>
                </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              prop="categoryName"
              label="分类名称">
            </el-table-column>
            <el-table-column
              prop="status"
              label="分类状态">
              <template slot-scope="scope">
                {{scope.row.status | status}}
              </template>
            </el-table-column>
            <el-table-column
              label="分类图片" width="140">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <img class="logoImgPic" :src="imgSrc(scope.row.picUrl)"/>
                  <div slot="reference" class="name-wrapper">
                    <el-button size="mini" icon="el-icon-picture">图片</el-button>
                  </div>
                </el-popover>
              </template>
              <!-- <template scope="scope">
                  <img class="logoImgPic" :src="imgSrc(scope.row.picUrl)"/>
              </template> -->
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="small" type="danger"><i class="el-icon-delete"></i></el-button> -->
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row, tableData,'delete')">删除</el-button>
                    <el-button
                      size="mini"
                      v-if="scope.row.status != '00'"
                      @click="abled(scope.row.id,'enabled')">启用</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      v-if="scope.row.status == '00'"
                      @click="enabled(scope.row.id,'disabled')">禁用</el-button>
                </el-button-group>
              </template>
          </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
            :current-page.sync="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="pageSize">
          </el-pagination>
          </div>
        </div>
      </div>
    </vue-body>
    <edit-role
      ref="edit-role"
      @close="editFinish"
      :view="view"
      v-if="view ==='create' || view ==='edit'"/>
  </vue-content>
</template>

<script>
  import AuthStorage from '@/services/storage.js'
  import {querytree,operation,query} from '@/services/productCategory'
  import {RequestError} from '@/services/errors'
  import {deepClone} from '@/utilities/object'
  import EditRole from './edit'
  import EditDetail from './Detail'
  export default {
    name: 'pro-category',
    components: {EditRole,EditDetail},
    data: () => ({
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      formFilter: {
        categoryName: "",
      },
      showHeader:false,
      CategoryList:[],
      loading: false,
      view: '',
      cascaderConfig: {
				label: 'categoryName',
				value: 'categoryNo',
				children: 'secondLevel'
      },
      treeConfig:{
        label: 'categoryName',
				children: 'categoryList'
      },
      category:[],
      ifSelect:true,
      tree:[],
    }),
    methods: {
    	async loadCategory () {
        try {
          let data = await queryAllCategory()
          this.CategoryList = data
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      async loadData () {
        this.loading = true
        try {
          let data = await query(Object.assign({currentPage: this.currentPage},{perPage:10},this.formFilter))
          // debugger
          this.tableData = data.data
          this.pageSize = parseInt(data.totalResult)
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      categoryChange(value){
        // console.log(value);
      },
      imgSrc(data){
      	return this.$store.state.imgUrl + data;
      },
      async queryTree(){
        let data = await querytree();
        this.tree = data.categoryList;
	  	},
      async  create (index, data) {
        this.view = 'create'
        await this.$nextTick()
        this.$refs['edit-role'].loadSelect();
      },
      async handleEdit (index, data) {
        this.view = 'edit'
        await this.$nextTick();
        this.$refs['edit-role'].loadSelect();
        this.$refs['edit-role'].dialogFormVisible = true
        this.$refs['edit-role'].formData = deepClone(data)
        this.$refs['edit-role'].id = data.id
        this.$refs['edit-role'].imgShow = 'edit'
      },
      handleDelete (index, data, rows,type) {
        this.$confirm(`此操作将删除${data.categoryName}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await operation({id:data.id,type:type})
            this.$message({
              type: 'success',
              message: '已删除'
            })
						rows.splice(index, 1)
						this.loadData();
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, '提示', {
                type: 'error',
                confirmButtonText: '确定'
              })
            } else {
              throw e
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      async enabled (id,type) {
        try {
        	// let insId = id.toString()
          await operation({id:id,type:type})
          this.$message({
            type: 'success',
            message: '成功'
          })
          this.loadData()
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
      },
      async abled (id,type) {
        try {
        	// let insId = id.toString()
          await operation({id:id,type:type})
          this.$message({
            type: 'success',
            message: '成功'
          })
          this.loadData()
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
      },
      handleNodeClick(data){
        // console.log(data.categoryName);
        this.formFilter.categoryName = data.categoryName;
        this.loadData();
      },
      SearchSubmit () {
        this.loadData()
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.category = []
        this.currentPage = 1
        this.loadData()
      },
      editFinish (needRefresh) {
        this.view = ''
        this.vueContent = true;
        if (needRefresh) {
          this.loadData()
        }
      }
    },
    watch: {
      currentPage (newVal) {
        this.loadData(newVal)
      }
    },
    filters: {
      status (value) {
        return {'00': '已启用', '01': '已禁用'}[value]
      }
    },
    created () {
      this.loadData()
      // this.queryTree()
    }
  }
</script>
<style>
.content{
  width: 100%;
  /* display: flex; */
}
.logoImgPic{
  height: 80px;
  display: block;
  margin: 0 auto;
  /* padding-left: 30px; */
}
.left_content{
  margin-right: 15px;
}
.right_content_table{
  /* flex: 1; */
  width: 100%;
}
.pagination{
  float: right;
  margin-top: 10px;
}
.el-table .rowColor{
  background: #f0f9eb;
}
.el-table__expanded-cell{
  padding: 10px 0 10px 50px;
}
</style>